<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1">
      <template #tab>
        <span>
          <bg-colors-outlined />
          CSDN
        </span>
      </template>
      <div class="text-left">
        <a href="https://blog.csdn.net/m0_72560900?type=blog" target="_blank"
          >CSDN博客地址: https://blog.csdn.net/m0_72560900?type=blog</a
        >
        <div>欢迎访问，点赞关注</div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2" disabled>
      <template #tab>
        <span>
          <bold-outlined />
          博客园
        </span>
      </template>
      <div class="text-left">
        <a href="https://blog.csdn.net/m0_72560900?type=blog" target="_blank"
          >博客园地址: https://home.cnblogs.com/u/rjxrrrx</a
        >
      </div>
    </a-tab-pane>
    <a-tab-pane key="3" disabled>
      <template #tab>
        <span>
          <strikethrough-outlined />
          stack overflow
        </span>
      </template>
      <div class="text-left">
        <a href="https://blog.csdn.net/m0_72560900?type=blog" target="_blank"
          >stack overflow地址:
          https://stackoverflow.com/users/22487836/rjx-fx</a
        >
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import {
  BgColorsOutlined,
  BoldOutlined,
  StrikethroughOutlined,
} from "@ant-design/icons-vue";
import { ref } from "vue";

const activeKey = ref("1");
</script>

<style scoped></style>
